<template>
  <div>
    <!-- 初始化 -->
    <div >
      <TopFilter
        :list="topFilterList"
        :cols="4"
        @filterChange="changeHandle"
        @onCollapse="collapseHandle"
      ></TopFilter>
      <FilterTable
        ref="table"
        :columns="columns"
        :fetchapi="fetchApi"
        :params="fetchParams"
        :datakey="'records'"
        :isSelectColumn="false"
        :onColumnsChange="columns => this.columns = columns"
      >
        <template slot="controls" slot-scope="props">
          <el-button size="small" type="primary"       @click="addFun">新增</el-button>
        </template>
      </FilterTable>
    </div>
    <!-- 点击功能后 -->
    <Drawer
      :visible.sync="isShow"
      :title="''"
      width="80%"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <modal
      :listAllData="listAllData"
      :isOk="isOk"
      :rowData="rowData"
      :type="type"
      @close="closeHandler"
      />
    </Drawer>
    
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { dictionary } from '@/utils/dictMixin';
import {getSaleInfoMaintain} from '@/api/common/CompanySale/dealerInfoMaintenance';
import { getlistAllData} from "@/api/common/org/dealerCompany";
import * as types from '@/api/common/CompanySale/dealerInfoMaintenance/types';
import modal from './modal'
export default {
  name: 'dealerInfoMaintenance',
  mixins: [dictionary],
  components: {
    modal
  },
  data() {
    this.BaseTable = null;
    return {
      topFilterList: this.createTopFilterList(),
      fetchApi: getSaleInfoMaintain,
      fetchParams: { xhrAbort: false },
      columns: this.createTableColumns(),
      isShow: false,
      rowData:'',
      type:'',
      isOk:false,
      province:[],
      listAllData:[],
      AllData:[],
    };
  },
  watch: {
      isOk(oldval,newval){
        if(oldval){
            this.listAllData.forEach(x=>{
              this.AllData.push({text:x.regionName,value:x.regionId})
              // 筛选省
              if(x.parentRegionId == null){
                this.province.push({text:x.regionName,value:x.regionId})
              }
            })
            this.columns[2].filterItems=_.uniqBy(this.province,'value')
            this.topFilterList[2].itemList=_.uniqBy(this.province,'value')
        }
      }
  },
  async mounted () {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.getCookie()
    await getlistAllData().then(res=>{
      this.listAllData=res.data
      this.isOk=true
    })
    
  },
  methods: {
      createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '经销商代码',
          fieldName: 'dealerCode',
          placeholder: '经销商代码',
          style: { width: '190px' },
        },
        {
          type: 'INPUT',
          label: '经销商名称',
          fieldName: 'dealerName',
          placeholder: '经销商名称',
          style: { width: '190px' },
        },
        {
          type: 'SELECT',
          label: '省',
          fieldName: 'provinceId',
          placeholder: '请选择省',
          style: { width: '190px' },
          change:val=>{
            let city=[]
            this.topFilterList[3].initialValue=''
            this.listAllData.forEach(x=>{
              // 筛选省
              if(x.parentRegionId == val){
                city.push({text:x.regionName,value:x.regionId})
                this.topFilterList[3].itemList=_.uniqBy(city,'value')
              }
            })
          },
          itemList: []
        },
        {
          type: 'SELECT',
          label: '市',
          fieldName: 'cityId',
          placeholder: '请选择市',
          style: { width: '190px' },
          itemList: [],
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 100,
          fixed: 'left',
          render: props => {
            return (
              <div>
                <el-button size="mini" type="text"  onClick={ ()=>this.editFun(props.row) }>
                  编辑
                </el-button>
                <el-divider direction="vertical" />
                <el-button size="mini" type="text" onClick={ ()=>this.showFun(props.row) }>
                  查看
                </el-button>
              </div>
            );
          }
        },
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '省',
          dataIndex: 'provinceId',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: [],
          render: props => {
            let province = ''
            if(props.row.provinceId != null){
              this.columns[2].filterItems.forEach(x=>{
                if(props.row.provinceId == x.value){
                  province=x.text
                }
              })
            }
            return <span>{province}</span>;
          }
        },
        {
          title: '市',
          dataIndex: 'cityId',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: [],
          render: props => {
            let city = ''
            if(props.row.cityId != null){
              this.AllData.forEach(x=>{
                if(props.row.cityId == x.value){
                  city=x.text
                }
              })
            }
            return <span>{city}</span>;
          }
        },
        {
          title: '经销商代码',
          dataIndex: 'dealerCode',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          // align:"center"
        },
        {
          title: '经销商简称',
          dataIndex: 'dealerShortName',
          sorter: true,
          filter: true,
          filterType: 'input',
          // align:"center"
          
        },
        {
          title: '经销商名称',
          dataIndex: 'dealerName',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: [],
          // render: props => {
          //   return <span>{this.isOk(props.row.positionCode)}</span>;
          // }
        },
        {
          title: '经销商类型',
          dataIndex: 'agType',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('2538'),
          render: props => {
            return <span>{this.createDictText(props.row.agType, '2538')}</span>;
          }
        },
        {
          title: '经销商状态',
          dataIndex: 'validStatus',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1001'),
          render: props => {
            return <span>{this.createDictText(props.row.validStatus, '1001')}</span>;
          }
        }
      ];
    },
    getCookie(){
        let allCookie=document.cookie.split(';')
        allCookie.forEach(x=>{
          if(x.indexOf('dataType') > -1 ){
            this.dataType=x.split('=')[1]
            }
        })
        //判断是否为车厂10461003
        console.log(this.dataType,"dataType")
        if(this.dataType == 10461003){
          console.log(this.dataType,"车厂")
        }
      },
    // 新增
    addFun(){
      this.rowData=''
      this.type='add'
      this.isShow=true
    },
    // 编辑
    editFun(row) {
      console.log(row,"编辑")
      this.rowData=row
      this.type='edit'
      this.isShow=true
    },
    // 查看
    showFun(row) {
      console.log(row,"查看")
      this.rowData=row
      this.type='show'
      this.isShow=true
    },
    // 搜索
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val, { xhrAbort: false });
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    // 关闭
    closeHandler(type) {
      this.isShow = false
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    }
  },

};
</script>

<style lang="less" scoped>
</style>
